<?php



//读取文件中保存的缓存接口数据
$cache_file = $_SERVER['DOCUMENT_ROOT'] . '/cache.json';
$cache_data = file_get_contents($cache_file);
$cache_data = json_decode($cache_data, true);
//检查是否过期或是否存在
if ($cache_data['expire_time'] < time() || !isset($cache_data['data'])) {
    //重新获取数据
    $cache_data = get_cache_data();
    //保存到文件
    file_put_contents($cache_file, json_encode($cache_data));
}
$data = $cache_data['data'];



function get_cache_data()
{
    $Resp = curl2("https://gitee.com/api/v5/repos/QtCodeCreators/customer-service/releases/latest");

    $Resp = json_decode($Resp, true);
    $Resp['author'] = [
        'name' => "韩先生",
        'avatar_url' => "https://foruda.gitee.com/avatar/1718851409776332054/7511675_hkysw_1718851409.png!avatar200"
    ];
    $Res['expire_time'] = time() + 30 * 60;
    $Res['data'] = $Resp;
    return $Res;
}
function Curl2($url, $post = null, $headers = [], $referer = '', $cookie = '', $returnHeaders = false, $userAgent = '', $noBody = false)
{
    global $code;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_TIMEOUT, 60);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_ENCODING, 'gzip');

    $httpHeaders = [
        'Accept: */*',
        'Accept-Encoding: gzip,deflate,sdch',
        'Accept-Language: zh-CN,zh;q=0.8',
        'Connection: close'
    ];
    foreach ($headers as $key => $value) {
        $httpHeaders[] = "$key: $value";
    }
    curl_setopt($ch, CURLOPT_HTTPHEADER, $httpHeaders);

    if (!is_null($post)) {
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, is_array($post) ? http_build_query($post) : $post);
    }
    if ($returnHeaders) {
        curl_setopt($ch, CURLOPT_HEADER, true);
    }
    if ($cookie) {
        curl_setopt($ch, CURLOPT_COOKIE, $cookie);
    }
    if ($referer) {
        curl_setopt($ch, CURLOPT_REFERER, $referer);
    }
    if ($userAgent) {
        curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
    } else {
        curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36');
    }
    if ($noBody) {
        curl_setopt($ch, CURLOPT_NOBODY, true);
    }
    $ret = curl_exec($ch);
    if ($ret === false) {
        $error = curl_error($ch);
        curl_close($ch);
        return "cURL Error: $error";
    }
    curl_close($ch);
    if (!$code) {
        return convertUnicodeToUtf8($ret);
    } else {
        return $ret;
    }
}

function convertUnicodeToUtf8($str) {
    return $str;
}

?>


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序发布 - <?= $data['tag_name'] ?></title>
    <!-- 主Tailwind CSS链接 -->
    <script src="https://assets.ithxs.com/cdn/tailwindcss/tailwindcss.css"></script>
    <!-- 备用Tailwind CSS链接 -->

    <!-- 主Font Awesome链接 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            }
            .bg-gradient {
                background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            }
        /* Markdown内容样式增强 */
        .prose {
            max-width: none;
        }
        .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }
        .prose h1:first-child, .prose h2:first-child, .prose h3:first-child {
            margin-top: 0;
        }
        .prose ul, .prose ol {
            margin: 1em 0;
        }
        .prose pre {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        .prose blockquote {
            border-left-width: 4px;
            border-left-color: #3B82F6;
            background-color: #f8fafc;
            padding: 1rem;
            margin: 1rem 0;
        }
    </style>
    <!-- 基础样式保障 -->
    <style>
        /* 确保基本样式在外部资源加载失败时仍能显示 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background: white;
            margin-bottom: 20px;
            overflow: hidden;
        }
    </style>
</head>

<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">

    <!-- 头部 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-custom">
        <div class="container mx-auto px-4 py-4">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">程序发布中心</h1>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 版本信息卡片 -->
        <section class="mb-12">
            <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:shadow-lg transition-custom card">
                <div class="bg-gradient text-white p-6">
                    <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                        <div>
                            <h2 class="text-2xl md:text-3xl font-bold mb-2">最新版本发布</h2>
                            <p class="opacity-90">获取最新功能和问题修复</p>
                        </div>
                        <div
                            class="mt-4 md:mt-0 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium">
                            <i class="fa fa-tag mr-1"></i> <span id="version-tag"><?= $data['tag_name'] ?></span>
                        </div>
                    </div>
                </div>

                <div class="p-6">
                    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                        <div class="flex items-center mb-4 md:mb-0">
                            <img id="author-avatar"
                                src="<?= $data['author']['avatar_url'] ?>"
                                alt="作者头像" class="w-12 h-12 rounded-full mr-4 border-2 border-primary/20">
                            <div>
                                <p class="font-semibold">发布者: <span id="author-name"><?= $data['author']['name'] ?></span></p>
                                <p class="text-gray-500 text-sm" id="release-date"><?= $data['created_at'] ?></p>
                            </div>
                        </div>
                        <div class="flex space-x-3">
                            <button
                                class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-custom">
                                <i class="fa fa-download mr-2"></i> 下载最新版
                            </button>
                            <button
                                class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg flex items-center transition-custom">
                                <i class="fa fa-history mr-2"></i> 历史版本
                            </button>   
                        </div>
                    </div>

                    <div class="border-t border-gray-100 pt-6">
                        <h3 class="text-xl font-bold mb-4 text-dark">版本名称</h3>
                        <p class="text-gray-700 mb-6" id="version-name"><?= $data['name'] ?></p>

                        <!-- 版本更新内容 -->
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="flex items-center text-dark font-semibold mb-4">
                                <i class="fa fa-file-text-o mr-2"></i> 更新内容
                            </h4>
                            <div class="prose max-w-none text-gray-700" id="release-content">
                                <!-- 内容将通过JS动态填充 -->
                                <p class="text-gray-500 italic">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 下载区域 -->
        <section>
            <h2 class="text-2xl font-bold mb-6 text-dark flex items-center">
                <i class="fa fa-download text-primary mr-2"></i> 下载选项
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 下载项 - macOS -->
                <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100 hover:shadow-md transition-custom"
                    id="macos-downloads">
                    <div class="flex items-center mb-4">
                        <i class="fa fa-apple text-2xl text-gray-700 mr-3"></i>
                        <h3 class="font-semibold text-lg">macOS</h3>
                    </div>
                    <ul class="space-y-3">
                        <!-- 内容将通过JS动态填充 -->
                    </ul>
                </div>

                <!-- 下载项 - Windows -->
                <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100 hover:shadow-md transition-custom"
                    id="windows-downloads">
                    <div class="flex items-center mb-4">
                        <i class="fa fa-windows text-2xl text-gray-700 mr-3"></i>
                        <h3 class="font-semibold text-lg">Windows</h3>
                    </div>
                    <ul class="space-y-3">
                        <!-- 内容将通过JS动态填充 -->
                    </ul>
                </div>

                <!-- 下载项 - Linux -->
                <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100 hover:shadow-md transition-custom"
                    id="linux-downloads">
                    <div class="flex items-center mb-4">
                        <i class="fa fa-linux text-2xl text-gray-700 mr-3"></i>
                        <h3 class="font-semibold text-lg">Linux</h3>
                    </div>
                    <ul class="space-y-3">
                        <!-- 内容将通过JS动态填充 -->
                    </ul>
                </div>
            </div>
        </section>

        <!-- 安装说明 -->
        <section class="mt-12">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient text-white p-6">
                    <div class="flex items-center">
                        <i class="fa fa-book text-2xl mr-3"></i>
                        <div>
                            <h2 class="text-2xl font-bold">老韩客服系统 - 安装说明</h2>
                            <p class="opacity-90 mt-1">一个现代化、高性能的网页客服系统</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2 mt-4">
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">Go 1.19+</span>
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">MIT License</span>
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">Version 1.0.0</span>
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">Build Passing</span>
                    </div>
                </div>

                <div class="p-6">
                    <!-- 项目概述 -->
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-dark flex items-center">
                            <i class="fa fa-info-circle text-primary mr-2"></i> 项目概述
                        </h3>
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                            <p class="text-gray-700 mb-3"><strong>老韩客服系统</strong> 是一个简单易用的网页客服系统，支持实时聊天功能。</p>
                            
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                            <div class="bg-gradient-to-r from-blue-50 to-blue-100 p-4 rounded-lg">
                                <div class="flex items-center text-blue-600 mb-2">
                                    <i class="fa fa-comments text-xl mr-2"></i>
                                    <span class="font-semibold">实时聊天</span>
                                </div>
                                <p class="text-sm text-gray-600">客户和客服可以实时对话</p>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-green-100 p-4 rounded-lg">
                                <div class="flex items-center text-green-600 mb-2">
                                    <i class="fa fa-users text-xl mr-2"></i>
                                    <span class="font-semibold">多客服</span>
                                </div>
                                <p class="text-sm text-gray-600">可以添加多个客服账号</p>
                            </div>
                            <div class="bg-gradient-to-r from-purple-50 to-purple-100 p-4 rounded-lg">
                                <div class="flex items-center text-purple-600 mb-2">
                                    <i class="fa fa-mobile text-xl mr-2"></i>
                                    <span class="font-semibold">跨平台</span>
                                </div>
                                <p class="text-sm text-gray-600">手机电脑都能用</p>
                            </div>
                            <div class="bg-gradient-to-r from-orange-50 to-orange-100 p-4 rounded-lg">
                                <div class="flex items-center text-orange-600 mb-2">
                                    <i class="fa fa-cog text-xl mr-2"></i>
                                    <span class="font-semibold">一键安装</span>
                                </div>
                                <p class="text-sm text-gray-600">宝塔面板一键安装</p>
                            </div>
                        </div>
                    </div>

                    <!-- 技术栈 -->
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-dark flex items-center">
                            <i class="fa fa-code text-primary mr-2"></i> 技术栈
                        </h3>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <i class="fa fa-server text-blue-500 text-xl mb-2"></i>
                                <div class="text-sm font-semibold">Go语言</div>
                                <div class="text-xs text-gray-500">后端</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <i class="fa fa-database text-orange-500 text-xl mb-2"></i>
                                <div class="text-sm font-semibold">MySQL</div>
                                <div class="text-xs text-gray-500">数据库</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <i class="fa fa-html5 text-red-500 text-xl mb-2"></i>
                                <div class="text-sm font-semibold">Web前端</div>
                                <div class="text-xs text-gray-500">JS+HTML+CSS</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <i class="fa fa-cloud text-green-500 text-xl mb-2"></i>
                                <div class="text-sm font-semibold">宝塔面板</div>
                                <div class="text-xs text-gray-500">部署</div>
                            </div>
                        </div>
                    </div>

                    <!-- 快速开始 -->
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-dark flex items-center">
                            <i class="fa fa-rocket text-primary mr-2"></i> 快速开始
                        </h3>

                        <!-- 推荐安装方式 -->
                        <div class="bg-green-50 border-l-4 border-green-400 p-4 mb-6">
                            <h4 class="font-bold text-green-800 mb-2 flex items-center">
                                <i class="fa fa-star mr-2"></i> 推荐安装方式：宝塔面板部署（适合生产环境）
                            </h4>
                        </div>

                        <!-- 详细安装步骤 -->
                        <div class="space-y-6">
                            <!-- 步骤1 -->
                            <div class="border-l-4 border-blue-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">1</span>
                                    安装宝塔面板
                                </h4>
                                <p class="text-sm text-gray-700 mb-2">宝塔通用安装脚本：</p>
                                <div
                                    class="bg-gray-900 text-green-400 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                                    <div>if [ -f /usr/bin/curl ];then curl -sSO
                                        https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh
                                        https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh
                                        ed8484bec</div>
                                </div>
                            </div>

                            <!-- 步骤2 -->
                            <div class="border-l-4 border-blue-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">2</span>
                                    安装必要组件
                                </h4>
                                <p class="text-sm text-gray-700 mb-2">登录宝塔面板后，在「软件商店」中安装以下组件：</p>
                                <ul class="space-y-1 text-sm text-gray-600 ml-4">
                                    <li class="flex items-center"><i class="fa fa-check-circle text-green-500 mr-2"></i>
                                        <strong>Nginx 1.28+</strong> - Web服务器
                                    </li>
                                    <li class="flex items-center"><i class="fa fa-check-circle text-green-500 mr-2"></i>
                                        <strong>MySQL 5.7+</strong> - 数据库服务
                                    </li>
                                    <li class="flex items-center"><i class="fa fa-check-circle text-green-500 mr-2"></i>
                                        <strong>Redis</strong> - 缓存服务（应用商店安装最新版）
                                    </li>
                                </ul>
                            </div>

                            <!-- 步骤3 -->
                            <div class="border-l-4 border-blue-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">3</span>
                                    创建项目目录
                                </h4>
                                <p class="text-sm text-gray-700 mb-2">在宝塔面板中：</p>
                                <ol class="list-decimal list-inside text-sm text-gray-600 ml-4 space-y-1">
                                    <li>点击「文件」菜单</li>
                                    <li>进入 <code class="bg-gray-100 px-1 py-0.5 rounded">/www/wwwroot</code> 目录</li>
                                    <li>创建新文件夹：<code class="bg-gray-100 px-1 py-0.5 rounded">chat</code></li>
                                </ol>
                            </div>

                            <!-- 步骤4 -->
                            <div class="border-l-4 border-blue-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">4</span>
                                    下载并部署程序
                                </h4>
                                <div class="space-y-3">
                                    <div>
                                        <h5 class="font-semibold text-gray-700 mb-2">1. 创建项目目录并下载安装包：</h5>
                                        <div
                                            class="bg-gray-900 text-green-400 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                                            <div class="text-gray-400 mb-1"># 创建项目目录（如果不存在）</div>
                                            <div>mkdir -p /www/wwwroot/chat</div>
                                            <div>cd /www/wwwroot/chat</div>
                                            <div class="mt-2 text-gray-400"># 下载并解压程序安装包</div>
                                            <div>wget
                                                https://gitee.com/QtCodeCreators/customer-service/releases/download/v2.1.1/v2.1.1.zip
                                            </div>
                                            <div>unzip -j v2.1.1.zip -d /www/wwwroot/chat</div>
                                        </div>
                                    </div>
                                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-3">
                                        <p class="text-sm text-yellow-800">
                                            <i class="fa fa-lightbulb-o mr-1"></i>
                                            <strong>解压后会得到多个安装脚本（直接在/www/wwwroot/chat目录下）：</strong><br>
                                            • Linux系统：<code>download-linux.sh</code><br>
                                            • Windows系统：<code>download-windows.bat</code><br>
                                            • macOS系统：<code>download-macos.sh</code><br>
                                            💡 本教程以Linux系统为主，Windows/macOS用户请使用对应脚本，使用方法与Linux类似。
                                        </p>
                                    </div>
                                    <div>
                                        <h5 class="font-semibold text-gray-700 mb-2">2. 清理并执行安装脚本：</h5>
                                        <div
                                            class="bg-gray-900 text-green-400 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                                            <div class="text-gray-400 mb-1"># 进入安装目录</div>
                                            <div>cd /www/wwwroot/chat</div>
                                            <div class="text-gray-400"># 清理其他脚本，只保留download-linux.sh</div>
                                            <div>rm -f download-windows.bat download-macos.sh</div>
                                            <div class="mt-2 text-gray-400"># 赋予执行权限并执行</div>
                                            <div>chmod +x download-linux.sh</div>
                                            <div>./download-linux.sh</div>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-600 bg-blue-50 p-2 rounded">
                                            <strong>脚本会自动：</strong>
                                            <ul class="list-disc list-inside ml-2 mt-1">
                                                <li>检测系统架构</li>
                                                <li>下载对应的程序安装包</li>
                                                <li>自动解压到当前目录（/www/wwwroot/chat）</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤5 -->
                            <div class="border-l-4 border-purple-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-purple-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">5</span>
                                    配置Go项目
                                </h4>
                                <p class="text-sm text-gray-700 mb-2">在宝塔面板中：</p>
                                <ol class="list-decimal list-inside text-sm text-gray-600 ml-4 space-y-1">
                                    <li>点击「网站」菜单</li>
                                    <li>选择「Go项目」</li>
                                    <li>点击「添加项目」</li>
                                    <li>填写以下信息：
                                        <ul class="list-disc list-inside ml-4 mt-1">
                                            <li>项目可执行程序：选择解压后的程序文件 <code
                                                    class="bg-gray-100 px-1 py-0.5 rounded">customer-service</code></li>
                                            <li>端口：填写 <code class="bg-gray-100 px-1 py-0.5 rounded">8180</code></li>
                                            <li>勾选「放行端口」（如果不勾选，需要配置域名访问）</li>
                                            <li>勾选「开机启动」</li>
                                        </ul>
                                    </li>
                                    <li>点击「确定」完成项目添加</li>
                                </ol>
                            </div>

                            <!-- 步骤6 -->
                            <div class="border-l-4 border-orange-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-orange-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">6</span>
                                    配置数据库
                                </h4>
                                <div class="space-y-3">
                                    <div>
                                        <p class="text-sm text-gray-700 mb-2">在宝塔面板「数据库」中创建新数据库：</p>
                                        <ul class="list-disc list-inside text-sm text-gray-600 ml-4">
                                            <li>数据库名：<code class="bg-gray-100 px-1 py-0.5 rounded">chat</code></li>
                                            <li>用户名：<code class="bg-gray-100 px-1 py-0.5 rounded">chat</code></li>
                                            <li>密码：自定义强密码</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-700 mb-2">修改程序配置文件：</p>
                                        <div
                                            class="bg-gray-900 text-green-400 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                                            <div>cd /www/wwwroot/chat</div>
                                            <div>vim config.yaml</div>
                                        </div>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-700 mb-2">更新数据库配置：</p>
                                        <div
                                            class="bg-gray-900 text-green-400 p-3 rounded-lg font-mono text-xs overflow-x-auto">
                                            <div class="text-gray-400">database:</div>
                                            <div> host: "127.0.0.1"</div>
                                            <div> port: 3306</div>
                                            <div> user: "chat"</div>
                                            <div> password: "你的数据库密码"</div>
                                            <div> dbname: "chat"</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤7 -->
                            <div class="border-l-4 border-green-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">7</span>
                                    启动服务
                                </h4>
                                <p class="text-sm text-gray-700">在宝塔面板的「Go项目」中找到刚添加的项目，点击「启动」按钮。</p>
                            </div>

                            <!-- 步骤8 -->
                            <div class="border-l-4 border-indigo-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-indigo-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">8</span>
                                    访问系统
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                                    <div class="bg-blue-50 p-3 rounded-lg">
                                        <div class="font-semibold text-blue-800">客户端访问</div>
                                        <div class="text-blue-600">http://你的服务器IP:8180</div>
                                    </div>
                                    <div class="bg-green-50 p-3 rounded-lg">
                                        <div class="font-semibold text-green-800">客服后台</div>
                                        <div class="text-green-600">http://你的服务器IP:8180/admin</div>
                                    </div>
                                    <div class="bg-purple-50 p-3 rounded-lg">
                                        <div class="font-semibold text-purple-800">超级管理员后台</div>
                                        <div class="text-purple-600">http://你的服务器IP:8180/super-admin</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤9 -->
                            <div class="border-l-4 border-pink-400 pl-4">
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <span
                                        class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">9</span>
                                    配置域名访问（可选）
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-green-50 border-l-4 border-green-400 p-3">
                                        <h5 class="font-semibold text-green-800 mb-2">推荐方案：宝塔面板一键配置</h5>
                                        <p class="text-sm text-green-700 mb-2">如果你有域名，宝塔面板提供了最简单的域名绑定方式：</p>
                                        <ol class="list-decimal list-inside text-sm text-green-600 ml-2">
                                            <li>在宝塔面板「网站」→「Go项目」中，找到你的项目</li>
                                            <li>点击「设置」→「域名管理」，添加你的域名</li>
                                            <li>系统会自动配置反向代理，无需手动操作</li>
                                            <li>SSL证书也可以一键申请</li>
                                        </ol>
                                    </div>
                                    <div class="bg-blue-50 p-3 rounded-lg">
                                        <h5 class="font-semibold text-blue-800 mb-2">其他部署方式参考</h5>
                                        <ul class="text-sm text-blue-700 space-y-1">
                                            <li>• <strong>Supervisor部署：</strong>需手动配置Nginx反向代理到 127.0.0.1:8180</li>
                                            <li>• <strong>Docker部署：</strong>推荐使用1Panel面板，支持一键域名绑定</li>
                                        </ul>
                                        <p class="text-xs text-blue-600 mt-2">💡 提示：宝塔面板的域名配置最简便，建议优先使用宝塔方案。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 默认账号 -->
                        <div class="mt-8 p-4 bg-red-50 border border-red-200 rounded-lg">
                            <h4 class="font-semibold text-red-800 mb-3 flex items-center">
                                <i class="fa fa-key mr-2"></i> 默认账号密码
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                                <div class="bg-white p-3 rounded-lg border border-red-200">
                                    <h5 class="font-semibold text-purple-800 mb-2">超级管理员账号（用于系统管理和配置）</h5>
                                    <ul class="space-y-1 text-gray-700">
                                        <li><strong>访问地址：</strong>/super-admin</li>
                                        <li><strong>用户名：</strong>admin</li>
                                        <li><strong>密码：</strong>123456</li>
                                    </ul>
                                </div>
                                <div class="bg-white p-3 rounded-lg border border-red-200">
                                    <h5 class="font-semibold text-green-800 mb-2">客服账号（用于日常客服工作）</h5>
                                    <ul class="space-y-1 text-gray-700">
                                        <li><strong>访问地址：</strong>/admin</li>
                                        <li><strong>用户名：</strong>service</li>
                                        <li><strong>密码：</strong>123456</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="mt-3 p-2 bg-red-100 border border-red-300 rounded flex items-start">
                                <i class="fa fa-exclamation-triangle text-red-600 mr-2 mt-0.5"></i>
                                <p class="text-sm text-red-800"><strong>安全提醒：</strong>首次登录后请立即修改默认密码，确保系统安全！</p>
                            </div>
                        </div>
                    </div>

                    <!-- 联系我们 -->
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <h3 class="text-xl font-bold mb-4 text-dark flex items-center">
                            <i class="fa fa-phone text-primary mr-2"></i> 联系我们
                        </h3>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-blue-50 p-3 rounded-lg text-center">
                                <i class="fa fa-qq text-blue-500 text-xl mb-1"></i>
                                <div class="text-sm font-semibold">客服QQ</div>
                                <div class="text-xs text-gray-600">1772891600</div>
                            </div>
                            <div class="bg-green-50 p-3 rounded-lg text-center">
                                <i class="fa fa-envelope text-green-500 text-xl mb-1"></i>
                                <div class="text-sm font-semibold">反馈邮箱</div>
                                <div class="text-xs text-gray-600">1772891600@qq.com</div>
                            </div>
                            <div class="bg-orange-50 p-3 rounded-lg text-center">
                                <i class="fa fa-wechat text-orange-500 text-xl mb-1"></i>
                                <div class="text-sm font-semibold">反馈微信</div>
                                <div class="text-xs text-gray-600">WebHxs</div>
                            </div>
                            <div class="bg-purple-50 p-3 rounded-lg text-center">
                                <i class="fa fa-code-fork text-purple-500 text-xl mb-1"></i>
                                <div class="text-sm font-semibold">项目地址</div>
                                <div class="text-xs text-gray-600">
                                    <a href="https://gitee.com/hkysw/laohan-chat" target="_blank"
                                        class="hover:underline">Gitee</a>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4 p-3 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg">
                            <p class="text-sm text-gray-700 flex items-center justify-center">
                                <i class="fa fa-star text-yellow-500 mr-2"></i>
                                如果这个项目对你有帮助，请给我们一个星标！
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>



    <!-- JavaScript -->
    <script>
        // 处理导航栏滚动效果
        window.addEventListener('scroll', function () {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
            }
        });

        // 使用PHP传递的数据初始化页面
        function loadReleaseData() {
            // 从PHP获取数据
            const data = <?= json_encode($data) ?>;
            console.log('使用PHP接口数据:', data);
            updatePageWithData(data);
        }

        // 使用数据更新页面内容
        function updatePageWithData(data) {
            // 更新基本信息
            document.getElementById('version-tag').textContent = data.tag_name || '未知版本';
            document.getElementById('version-name').textContent = data.name || '无版本名称';
            document.getElementById('author-name').textContent = data.author?.name || '未知作者';
            document.getElementById('author-avatar').src = data.author?.avatar_url || '';

            // 格式化日期
            if (data.created_at) {
                const date = new Date(data.created_at);
                const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
                document.getElementById('release-date').textContent = formattedDate;
            }

            // 解析并更新版本内容
            if (data.body) {
                parseAndUpdateReleaseContent(data.body);
            } else {
                // 如果没有更新内容，显示提示
                document.getElementById('release-content').innerHTML = '<p class="text-gray-500 italic">无更新内容</p>';
            }

            // 分类并更新下载链接
            if (data.assets && data.assets.length > 0) {
                categorizeAndDisplayAssets(data.assets);
            }
        }

        // 解析并更新版本内容 - Markdown格式解析版
        function parseAndUpdateReleaseContent(body) {
            const contentDiv = document.getElementById('release-content');

            try {
                // 处理可能的特殊字符和换行
                let processedBody = body.replace(/\r\n/g, '\n').replace(/​/g, '');

                // 解析markdown内容并转换为HTML
                const htmlContent = parseMarkdownToHtml(processedBody);

                // 更新页面内容
                contentDiv.innerHTML = htmlContent;

            } catch (error) {
                console.error('解析版本内容失败:', error);
                contentDiv.innerHTML = '<p class="text-red-500">无法加载版本内容</p>';
            }
        }

        // 将Markdown内容转换为HTML
        function parseMarkdownToHtml(content) {
            // 按行分割内容
            const lines = content.split('\n');
            let html = '';
            let inList = false;
            let listType = null; // 'ul' or 'ol'

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i].trim();

                if (!line) {
                    // 空行处理
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }
                    html += '<br>\n';
                    continue;
                }

                // 处理标题（支持 # ## ### #### ##### ######）
                if (line.match(/^#{1,6}\s+/)) {
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }

                    const level = line.match(/^#+/)[0].length;
                    const titleText = line.replace(/^#+\s*/, '');
                    const parsedTitle = parseMarkdownText(titleText);

                    // 根据标题级别选择样式
                    let className = '';
                    switch (level) {
                        case 1: className = 'text-2xl font-bold mb-4 mt-6 text-gray-900'; break;
                        case 2: className = 'text-xl font-bold mb-3 mt-5 text-gray-800'; break;
                        case 3: className = 'text-lg font-semibold mb-2 mt-4 text-gray-700'; break;
                        default: className = 'text-base font-medium mb-2 mt-3 text-gray-600'; break;
                    }

                    html += `<h${level} class="${className}">${parsedTitle}</h${level}>\n`;
                }
                // 处理无序列表
                else if (line.match(/^[-*+]\s+/)) {
                    const itemText = line.replace(/^[-*+]\s+/, '');
                    const parsedText = parseMarkdownText(itemText);

                    if (!inList || listType !== 'ul') {
                        if (inList && listType === 'ol') {
                            html += '</ol>\n';
                        }
                        html += '<ul class="list-none space-y-2 mb-4">\n';
                        inList = true;
                        listType = 'ul';
                    }

                    html += `<li class="flex items-start"><i class="fa fa-check-circle text-primary mt-1 mr-2 text-sm"></i><span>${parsedText}</span></li>\n`;
                }
                // 处理有序列表
                else if (line.match(/^\d+\.\s+/)) {
                    const itemText = line.replace(/^\d+\.\s+/, '');
                    const parsedText = parseMarkdownText(itemText);

                    if (!inList || listType !== 'ol') {
                        if (inList && listType === 'ul') {
                            html += '</ul>\n';
                        }
                        html += '<ol class="list-decimal list-inside space-y-2 mb-4 ml-4">\n';
                        inList = true;
                        listType = 'ol';
                    }

                    html += `<li class="text-gray-700">${parsedText}</li>\n`;
                }
                // 处理代码块
                else if (line.startsWith('```')) {
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }

                    // 查找代码块结束
                    let codeContent = '';
                    let j = i + 1;
                    while (j < lines.length && !lines[j].trim().startsWith('```')) {
                        codeContent += lines[j] + '\n';
                        j++;
                    }

                    html += `<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto mb-4"><code class="text-sm">${codeContent.trim()}</code></pre>\n`;
                    i = j; // 跳过代码块内容
                }
                // 处理引用
                else if (line.startsWith('> ')) {
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }

                    const quoteText = line.replace(/^>\s*/, '');
                    const parsedQuote = parseMarkdownText(quoteText);
                    html += `<blockquote class="border-l-4 border-primary/30 pl-4 italic text-gray-600 mb-4">${parsedQuote}</blockquote>\n`;
                }
                // 处理水平分割线
                else if (line.match(/^---+$/) || line.match(/^\*\*\*+$/) || line.match(/^___+$/)) {
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }
                    html += '<hr class="my-6 border-gray-200">\n';
                }
                // 处理普通段落
                else {
                    if (inList) {
                        html += `</${listType}>\n`;
                        inList = false;
                        listType = null;
                    }

                    const parsedLine = parseMarkdownText(line);
                    html += `<p class="mb-3 text-gray-700 leading-relaxed">${parsedLine}</p>\n`;
                }
            }

            // 如果最后还在列表中，关闭列表标签
            if (inList) {
                html += `</${listType}>\n`;
            }

            return html;
        }

        // 解析Markdown文本格式（加粗、斜体、代码等）
        function parseMarkdownText(text) {
            if (!text) return '';

            return text
                // 处理加粗文本 **text** 或 __text__
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/__(.*?)__/g, '<strong>$1</strong>')
                // 处理斜体文本 *text* 或 _text_
                .replace(/(?<!\*)\*([^*]+?)\*(?!\*)/g, '<em>$1</em>')
                .replace(/(?<!_)_([^_]+?)_(?!_)/g, '<em>$1</em>')
                // 处理内联代码 `code`
                .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 py-0.5 rounded text-sm">$1</code>')
                // 处理删除线 ~~text~~
                .replace(/~~(.*?)~~/g, '<del>$1</del>')
                // 处理链接 [text](url)
                .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-primary hover:underline" target="_blank">$1</a>');
        }

        // 分类并显示下载资源
        function categorizeAndDisplayAssets(assets) {
            // 获取各平台下载列表容器
            const macosContainer = document.querySelector('#macos-downloads ul');
            const windowsContainer = document.querySelector('#windows-downloads ul');
            const linuxContainer = document.querySelector('#linux-downloads ul');

            // 清空现有内容
            macosContainer.innerHTML = '';
            windowsContainer.innerHTML = '';
            linuxContainer.innerHTML = '';

            // 分类资产
            assets.forEach(asset => {
                const link = document.createElement('a');
                link.href = asset.browser_download_url;
                link.className = 'flex justify-between items-center text-gray-700 hover:text-primary transition-custom';
                link.innerHTML = `<span>${asset.name}</span><i class="fa fa-external-link text-sm"></i>`;
                link.target = '_blank'; // 新窗口打开

                const li = document.createElement('li');
                li.appendChild(link);

                // 根据文件名判断操作系统
                if (asset.name.includes('darwin')) {
                    macosContainer.appendChild(li);
                } else if (asset.name.includes('windows')) {
                    windowsContainer.appendChild(li);
                } else if (asset.name.includes('linux')) {
                    linuxContainer.appendChild(li);
                }
            });

            // 如果某个平台没有下载项，显示提示
            if (macosContainer.children.length === 0) {
                macosContainer.innerHTML = '<li class="text-gray-500 italic">无可用下载项</li>';
            }
            if (windowsContainer.children.length === 0) {
                windowsContainer.innerHTML = '<li class="text-gray-500 italic">无可用下载项</li>';
            }
            if (linuxContainer.children.length === 0) {
                linuxContainer.innerHTML = '<li class="text-gray-500 italic">无可用下载项</li>';
            }
        }

        // 检查样式是否加载成功
        function checkStylesLoaded() {
            // 检查Tailwind是否加载成功
            const isTailwindLoaded = typeof tailwind !== 'undefined';

            if (!isTailwindLoaded) {
                console.warn('Tailwind CSS未加载成功，尝试使用备用样式');
            }

            return isTailwindLoaded;
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function () {
            // 检查样式加载
            checkStylesLoaded();

            // 加载发布数据（使用PHP传递的数据）
            loadReleaseData();

            // 为下载按钮添加点击效果
            document.querySelectorAll('button').forEach(button => {
                button.addEventListener('click', function () {
                    this.classList.add('scale-95');
                    setTimeout(() => {
                        this.classList.remove('scale-95');
                    }, 150);
                });
            });
        });
    </script>
</body>

</html>

</html>